/**
 * rem布局适配方案
 * 该方案基于1920px设计稿，将屏幕等分为10份，1rem = 设计稿宽度/10
 */

// 设计稿尺寸（px）
const designWidth = 1920
// 设计稿基准字体大小（px）
const baseFontSize = designWidth / 10

/**
 * 设置根元素字体大小
 */
export function setRem() {
  // 当前设备宽度
  const currentWidth = document.documentElement.clientWidth || document.body.clientWidth
  
  // 计算当前设备下的基准字体大小
  // 限制最小宽度为1200px，避免在小屏幕上内容过小
  const currentFontSize = Math.max(currentWidth, 1200) / 10
  
  // 设置根元素字体大小
  document.documentElement.style.fontSize = `${currentFontSize}px`
  
  // 设置默认字体大小为16px，避免rem影响正常文本大小
  document.body.style.fontSize = '16px'
}

/**
 * 初始化rem适配
 */
export function initRem() {
  // 初始化时设置一次
  setRem()
  
  // 窗口大小变化时重新设置
  window.addEventListener('resize', setRem)
  
  // 页面显示/切换时重新设置
  window.addEventListener('pageshow', (e) => {
    if (e.persisted) {
      setRem()
    }
  })
}

/**
 * px转换为rem工具函数
 * @param {number} px 像素值
 * @returns {string} rem值
 */
export function px2rem(px: number): string {
  return `${px / baseFontSize}rem`
}